function note_create() {
    var note = document.createElement('note');

    var div1 = document.createElement('div');
    div1.style.left = '20px';
    div1.style.top = '20px';
    div1.style.width = '180px';
    div1.style.height = '180px'
    div1.classList.add('note', 'flex-box');

    var div2 = document.createElement('div');
    div2.classList.add('flex-box', 'flex-element', 'flex-column', 'relative-container');

    var div_toolbar = document.createElement('div');
    div_toolbar.classList.add('note-tlb', 'flex-box');
    div_toolbar.addEventListener("mousedown", note_drag)
    var div_toolbar_button = document.createElement('button');
    div_toolbar_button.classList.add('fa', 'fa-close', 'btn');
    div_toolbar_button.title = 'Close';
    div_toolbar_button.addEventListener('click', note_delete)
    div_toolbar.append(div_toolbar_button)

    var div_textarea = document.createElement('textarea');
    div_textarea.classList.add('note-content', 'flex-element');
    div_textarea.innerText = 'new note';

    var div_resize = document.createElement('div');
    div_resize.classList.add('note-resize');
    div_resize.addEventListener("mousedown", note_resize)

    div2.append(div_toolbar);
    div2.append(div_textarea);
    div2.append(div_resize);
    div1.append(div2);
    note.append(div1);

    var note_container = document.querySelector('.relative-container');
    note_container.append(note);
}

function note_delete(e) {
    e.target.parentElement.parentElement.parentElement.remove()
}
function note_change(e){

}

function note_save() {

}

function note_clear() {

}


var createbtn = document.querySelector('[title=Create]');
var savebtn = document.querySelector('[title=Save]');
var clearbtn = document.querySelector('[title=Clear]');
var closebtn = document.querySelectorAll('[title=Close]');

createbtn.onclick = function () {
    note_create();
}
savebtn.onclick = function () {
    note_save();
}
clearbtn.onclick = function () {
    note_clear();
}


// var note_resize = document.querySelector('.note-resize');

function note_drag(e) {
    let oldX = e.clientX;
    let oldY = e.clientY;
    if (e.target.nodeName == 'BUTTON') {
        e.stopPropagation();
        return false;
    }
    let oldLeft = e.target.parentElement.parentElement.offsetLeft;
    let oldTop = e.target.parentElement.parentElement.offsetTop;
    let oldWidth = e.target.parentElement.parentElement.offsetWidth;
    let oldHeight = e.target.parentElement.parentElement.offsetHeight;
    document.onmousemove = (me) => {
        e.target.parentElement.parentElement.style.ursor = 'move';
        let newX = me.clientX;
        let newY = me.clientY;

        let moveX = oldX - newX;
        let moveY = oldY - newY;

        let newLeft = oldLeft - moveX;
        let newTop = oldTop - moveY;

        if (newLeft < 20) {
            newLeft = 20;
        }
        if (newTop < 20) {
            newTop = 20;
        }

        const {innerHeight, innerWidth} = window
        newLeft > innerWidth - oldWidth - 20 && (newLeft = innerWidth - oldWidth - 20)
        newTop > innerHeight - oldHeight - 44 && (newTop = innerHeight - oldHeight - 44)

        e.target.parentElement.parentElement.style.left = `${newLeft}px`;
        e.target.parentElement.parentElement.style.top = `${newTop}px`;
    };
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        e.target.parentElement.parentElement.style.cursor = '';
    };
    e.preventDefault()
}


function note_resize(e) {
    let oldX = e.clientX;
    let oldY = e.clientY;

    let oldLeft = e.target.parentElement.parentElement.offsetLeft;
    let oldTop = e.target.parentElement.parentElement.offsetTop;	
    let oldWidth = e.target.parentElement.parentElement.offsetWidth;
    let oldHeight = e.target.parentElement.parentElement.offsetHeight;
    document.onmousemove = (me) => {
        let newX = me.clientX;
        let newY = me.clientY;

        let moveX = newX - oldX;
        let moveY = newY - oldY;

        let newWidth = oldWidth + moveX;
        let newHeight = oldHeight + moveY;

        if (newWidth < 180) {
            newWidth = 180;
        }
        if (newHeight < 180) {
            newHeight = 180;
        }

        const {innerHeight, innerWidth} = window
	newWidth > innerWidth - oldLeft - 40 && (newWidth = innerWidth - oldLeft - 40)
        newHeight > innerHeight - oldTop - 64 && (newHeight = innerHeight - oldTop - 64)

        e.target.parentElement.parentElement.style.width = `${newWidth}px`;
        e.target.parentElement.parentElement.style.height = `${newHeight}px`;
    };
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    };
    e.preventDefault()
}
